{extend name="personcentor/information"}

{block name="jqjs"}
{/block}

{block name="main"}

<!--以下引入文件不要随意变换位置-->
<link rel="stylesheet" href="/static/index/business/css/demo.css" type="text/css" media="all"/>
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/static/index/business/js/pagescroller.min.js"></script>
<!--以上引入文件不要随意变换位置-->

<!--上传图片的插件开始-->
<script>
    //图片上传预览    IE是用了滤镜。
    function previewImage(file)
    {
        var MAXWIDTH  = 200;
        var MAXHEIGHT = 200;
        var div = document.getElementById('preview');
        if (file.files && file.files[0])
        {
            div.innerHTML ='<img id=imghead onclick=$("#previewImg").click()>';
            var img = document.getElementById('imghead');
            img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top+'px';
            }
            var reader = new FileReader();
            reader.onload = function(evt){img.src = evt.target.result;}
            reader.readAsDataURL(file.files[0]);
        }
        else //兼容IE
        {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
        }
    }
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){
        var param = {top:0, left:0, width:width, height:height};
        if( width>maxWidth || height>maxHeight ){
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;

            if( rateWidth > rateHeight ){
                param.width =  maxWidth;
                param.height = Math.round(height / rateWidth);
            }else{
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }
        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }
</script>

<!--上传图片的插件结束-->




<!--页面效果的插件-->
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "post",
            dataType: "json",
            url: "/business/ajax",
            success: function (data) {
                var navLabel = [];
                for (var i in data) {
                    navLabel.push(data[i]['f_name']);
                }

                $('#main').pageScroller({navigation: navLabel});
                $('.next').click(function (e) {
                    e.preventDefault();
                    pageScroller.next();
                });
                $('.prev').click(function (e) {
                    e.preventDefault();
                    pageScroller.prev();
                });
            },
            error: function () {
                alert('ajax请求失败');
            }

        });

    });
</script>
<!--页面效果的插件结束-->
<form action="{:url('/index/business/providehouse')}" enctype="multipart/form-data" method="post">
<div class="col-main">
    <div class="main-wrap">
        <div id="div_box" class="light">
            <a href="#" class="prev"><img src="/static/index/business/images/icon_arrow-up_light.png" alt="" width="28"
                                          height="31"/></a>
            <a href="#" class="next"><img src="/static/index/business/images/icon_arrow-down_light.png" alt=""
                                          width="28" height="31"/></a></div>
        <div id="wrapper">
            <div id="main">

                <div class="section" >
                    <h1>位置类型</h1>
                    <br/>
                    <br/>
                    <div style="width:900px;height:100px;">
                        <h4>房屋位置</h4>
                        <br/>
                        <br/>
                        <!--房屋地址开始-->
                        <div style="margin-left: 80px;">
                        <span>请选择您的地址:</span>
                        <select id="pro" name="pro"></select>
                        <select id="city" name="city"></select>
                        <select id="area" name="area"></select>
                        <select id="street" name="street"></select>
                        <input type="text" name="detial" placeholder="请填写你的房屋详细地址" style="width:200px;"/>
                        </div>
                        <!--房屋地址结束-->
                    </div>
                    <br/>
                    <br/>
                   <div style="width:900px;height:100px;">
                       <h4>房屋类型</h4>
                       <br/>
                       {volist name="result" id="vo"}
                       <input type="radio" name="houseType" value="{$vo.id}" style="margin-left: 15px" checked/>{$vo.f_name}
                       {/volist}
                   </div>

                    <br/>
                    <br/>
                    <div style="width:900px;height:100px;">
                        <h4>再次确认身份</h4>
                        <br/>
                        <span>请再次填写联系人的姓名:</span>
                        <input type="text" name="link_name" id="link_name" style="margin-left: 15px"/>
                        <span class="content" ></span>
                    </div>
                    <div style="width:900px;height:100px;">
                    <h4>房名</h4>
                        <br/>
                    <span>给你房子取一个响亮名字:</span>
                    <input type="text" name="house_name"  style="margin-left: 15px"/>
                    </div>

                </div>
                <div class="section" >
                    <h1>配套设施</h1>
                    <br/>
                    <br/>
                    <div style="width:900px;height:120px;">
                        <h4>居家</h4>
                        <br/>
                        {volist name="result1" id="v"}
                        <input type="checkbox" name="houseserver{$v.id}" value="{$v.id}" style="margin-left: 15px" />{$v.f_name}
                        {/volist}
                    </div>
                    <div style="width:900px;height:120px;">
                        <h4>卫浴</h4>
                        <br/>
                        {volist name="result2" id="v"}
                        <input type="checkbox" name="bathserver{$v.id}" value="{$v.id}" style="margin-left: 15px"/>{$v.f_name}
                        {/volist}
                    </div>
                    <div style="width:900px;height:120px;">
                        <h4>餐厨</h4>
                        <br/>
                        {volist name="result3" id="v"}
                        <input type="checkbox" name="wasteserver{$v.id}" value="{$v.id}" style="margin-left: 15px"/>{$v.f_name}
                        {/volist}

                    </div>
                </div>
                <div class="section" >
                    <h1>入住说明</h1>
                    <br/>
                    <br/>
                    <div style="width:900px;height:120px;">
                        <h4>推荐入住人数</h4>
                        <br/>
                        {volist name="result4" id="v"}
                        <input type="radio" name="total" value="{$v.id}" style="margin-left: 15px" checked/>{$v.f_name}
                        {/volist}
                    </div>
                    <div style="width:900px;height:120px;">
                        <h4>提供</h4>
                        <br/>
                        {volist name="result5" id="v"}
                        <input type="checkbox" name="provide{$v.id}" value="{$v.id}" style="margin-left: 15px"/>{$v.f_name}
                        {/volist}
                    </div>
                    <div style="width:900px;height:120px;">
                        <h4>多久对房间打扫</h4>
                        <br/>
                        {volist name="result6" id="v"}
                        <input type="radio" name="clean" value="{$v.id}" style="margin-left: 15px" checked/>{$v.f_name}
                        {/volist}
                    </div>
                </div>
                <div class="section" >
                    <h1>房屋价格</h1>
                    <br/>
                    <br/>
                    <div>
                        <span style="font-size: 20px;margin-left: 15px;">请输入你要出租的房屋价格:</span>
                        <input type="text" name="price" placeholder="请输入你要出租的价格"/>元/天
                    </div>
                    <div style="width:350px;height:300px;margin-left:20%;margin-top: 35px;background-image: url('/static/index/business/images/qianxu.jpg');background-repeat:No-repeat;"></div>
                </div>
                <div class="section" >
                    <h1>房屋照片</h1>
                    <br/>
                    <br/>
                    <p>请上传出租房屋的照片:</p>

                    <!--执行上传房间图片的操作-->
                    <div class="input-group row">

                        <div class="col-sm-9 big-photo" style="margin-left: 10%;margin-top: 20px;">
                            <div id="preview">
                                <img id="imghead" border="0" src="/static/index/business/images/dianwo.png" width="200" height="200" onclick="$('#previewImg').click();" >
                            </div>
                            <input type="file" onchange="previewImage(this)" style="display: none;" id="previewImg" name="image">

                        </div>
                    </div>
                   <!--执行上传房间图片的操作结束-->
            </div>
                <div style="margin-left: 50%;padding-bottom:10%; ">
                <button type="submit" class="btn btn-info btn-lg okbtn" disabled>提交</button>
                </div>
            </div>
    </div>
</div>
</div>
</form>

<script>
   //执行地址联动的js代码部分开始
    // 获取省份信息
    $.ajax({
        type: 'get',
        url: '/business/address',
        dataType: 'json',
        async: false, //同步请求
        success:function (data){
            // 清空原先的数据
            $('#pro').empty();
            // 遍历省份数据
            // console.log(data);
            for (var i = 0; i < data.length; i++) {
                $('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo('#pro');
            }
        },
        error:function (){
            alert(' AJAX 执行失败!')
        }
    });

    // 绑定change事件
    $('#pro,#city,#area').change(function (){
        // 清空之后所有的select框的内容
        $(this).nextAll('select').show().empty();
        // 获取当前的value值
        var upid = $(this).val();
        // console.log(upid);
        // console.log($(this));
        // 保留 $(this)  变量
        var _this = $(this);

        // 请求下一级数据
        $.ajax({
            type: 'get',
            url: '/business/address',
            data: "upid="+upid,
            dataType: 'json',
            success:function (data){
                // 如果下一级没有查询到数据
                if (!data) {
                    _this.nextAll('select').hide();
                    return;
                }

                // 填充下一级数据
                for (var i = 0; i < data.length; i++) {
                    $('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo(_this.next('select'));
                }
                // 自动触发之后的select 的change事件
                _this.next('select').trigger('change');
            }
        });
    });


    // 自动触发#pro的change事件
    $('#pro').trigger('change');
   //执行地址联动的js代码部分结束
</script>

<!--再次确认联系人的姓名开始-->
<script>

  $('#link_name').blur(function(){

  var link_name =  $('#link_name').val();

      $.ajax({
          type : 'post',
          url : '/business/linkname',
          data : {"link_name":link_name},
          success:function(data){
              if(data){
                  $('.content').html('联系人正确').css('color','#0a0');
                  $('.okbtn').removeAttr("disabled");
              }else{
                  $('.content').html('与上面联系人姓名不匹配').css('color','#f00');
                  $('.okbtn').attr("disabled","true");
              }
          },
          error : function(){
              alert('ajax请求失败');
          }
      })


  });

</script>
<!--再次确认联系人的姓名结束-->
{/block}
{block name="lefttitle"}
{/block}
{block name="jqjs1"}
{/block}
